<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.min.js"></script>
		<style>
		div {
			width:100%;
			height:3000px;
			background-color:#ccc;
		}
		ul {
			list-style:none;
			position:fixed;
			top:150px;
			right:10px;
		}
		ul li {
			width:58px;
			height:58px;
			background-color:#341709;
			border-bottom:1px #cccccc solid;
			text-align:center;
			color:white;
		}
		</style>
		<script>
			$(function() {
		    $("li").bind({
		        "mouseenter": function() {
		            $(this).animate({
		                "background-position-x": "0px"
		            }, 200);
		        },
		        "mouseleave": function() {
		            $("li").stop(true, true);
		            $(this).animate({
		                "background-position-x": "-58px"
		            }, 200);
		        }
		    });
		    $(window).bind("scroll", function() {
		        var wtop = $(document).scrollTop();
		        if (wtop >= 800) {
		            $("ul li:first").fadeIn(200);
		        } else {
		            $("ul li:first").fadeOut(200);
		        }
		    });
		    $("ul li:first").bind("click", function() {
		        $("html,body").animate({
		            "scrollTop": "0px"
		        });
		    });
		});
			
		</script>
	</head>
	<body>
		<div></div>
	<ul>
	    <li style="display: none;">↑</li>
	</ul>
	</body>
</html>
